<template>
  <view>
    <view class="article-card-v4">
      <view class="img-wrap">
        <image
          class="cover-img"
          :src="formatImgUrl(info.coverImgUrl)"
          mode="aspectFill"
        />
        <!-- 已结束遮罩层 -->
        <view
          v-if="isEnded"
          class="img-mask"
        ></view>
        <!-- 状态标签 -->
        <view
          class="status-tag"
          v-if="!isEnded"
          :class="statusClass"
          >{{ statusText }}</view
        >
        <!-- 已结束水印 -->
        <image
          v-if="isEnded"
          class="end-icon"
          src="/static/icon/end_icon.png"
          mode="aspectFit"
        />
      </view>
      <view class="content-wrap">
        <view class="row-title">
          <view
            v-if="info.activityTypeName"
            class="type-tag"
            >{{ info.activityTypeName }}</view
          >
          <view class="title">{{ info.activityName }}</view>
        </view>
        <view>
          <view
            class="row"
            style="margin-bottom: 2rpx"
          >
            <image
              class="icon"
              src="/static/icon/date_icon.png"
              mode="aspectFit"
            />
            <text class="row-text">
              {{
                formatDate(info.activityStartTime) +
                ' ~ ' +
                formatDate(info.activityEndTime)
              }}</text
            >
          </view>
          <view
            class="row"
            style="margin-bottom: 4rpx"
          >
            <image
              class="icon"
              src="/static/icon/map_icon.png"
              mode="aspectFit"
            />
            <text class="row-text">{{ info.activityLocation }}</text>
          </view>
        </view>
      </view>
      <button
        class="signup-btn"
        :class="{ disabled: isEnded }"
        :disabled="isEnded"
      >
        <!-- @click="onSignup" -->
        去报名
      </button>
    </view>
    <view class="article-card-divider"></view>
  </view>
</template>

<script>
  import { formatImgUrl } from '../common/utils.js'
  export default {
    name: 'ArticleCardV4',
    props: {
      info: {
        type: Object,
        required: true
      }
    },
    computed: {
      now() {
        return new Date()
      },
      isNotStarted() {
        return new Date(this.info.activityStartTime) > this.now
      },
      isEnded() {
        return new Date(this.info.activityEndTime) < this.now
      },
      isOngoing() {
        return !this.isNotStarted && !this.isEnded
      },
      statusText() {
        if (this.isNotStarted) return '未开始'
        if (this.isOngoing) return '进行中'
        if (this.isEnded) return '已结束'
        return ''
      },
      statusClass() {
        if (this.isNotStarted) return 'status-not-started'
        if (this.isOngoing) return 'status-ongoing'
        if (this.isEnded) return 'status-ended'
        return ''
      }
    },
    methods: {
      formatImgUrl,
      formatDate(date) {
        if (!date) return ''
        const d = new Date(date)
        return `${d.getMonth() + 1}月${d.getDate()}日`
      },
      onSignup(e) {
        // if (this.isEnded) return;
        // this.$emit('signup');
      }
    }
  }
</script>

<style lang="scss" scoped>
  .article-card-v4 {
    display: flex;
    background: #fff;
    margin: 20rpx 30rpx;
    position: relative;
    box-sizing: border-box;
  }
  .img-wrap {
    width: 160rpx;
    height: 160rpx;
    position: relative;
    border-radius: 16rpx;
    overflow: hidden;
    flex-shrink: 0;
    background: #f2f2f2;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .cover-img {
    width: 160rpx;
    height: 160rpx;
    object-fit: cover;
    border-radius: 16rpx;
  }
  .status-tag {
    position: absolute;
    left: 0;
    top: 0;
    width: 90rpx;
    height: 34rpx;
    font-size: 24rpx;
    border-bottom-right-radius: 16rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    color: #fff;
  }
  .status-not-started {
    background: #999999;
  }
  .status-ongoing {
    background: #ff662a;
  }
  .status-ended {
    background: #999999;
  }
  .end-icon {
    position: absolute;
    left: 50%;
    top: 50%;
    width: 106rpx;
    height: 94rpx;
    z-index: 3;
    opacity: 0.7;
    transform: translate(-50%, -50%);
  }
  .content-wrap {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding-left: 28rpx;
    padding-top: 0;
    height: 160rpx;
  }
  .row {
    display: flex;
    align-items: center;
    width: 100%;
    height: 36rpx;
  }
  .row-title {
    display: flex;
    width: 100%;
    height: 90rpx;
  }
  .type-tag {
    width: 90rpx;
    height: 32rpx;
    background: rgba(61, 185, 131, 0.1);
    border-radius: 4rpx;
    border: 1px solid #3db983;
    color: #3db983;
    font-size: 22rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 16rpx;
  }
  .title {
    font-weight: 600;
    font-size: 34rpx;
    line-height: 36rpx;
    max-height: 72rpx;
    color: #333333;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    flex: 1;
  }
  .icon {
    width: 34rpx;
    height: 34rpx;
    margin-right: 8rpx;
  }
  .row-text {
    font-size: 24rpx;
    color: #666;
  }
  .signup-btn {
    position: absolute;
    width: 163rpx;
    height: 60rpx;
    line-height: 60rpx;
    font-size: 26rpx;
    border-radius: 30rpx;
    background: #0c8d6a;
    color: #fff;
    border: none;
    outline: none;
    transition: background 0.2s;
    right: 0rpx;
    bottom: 0rpx;
  }
  .signup-btn.disabled {
    color: #fff;
    background: #0c8d6a;
    opacity: 0.3;
  }
  .article-card-divider {
    height: 1rpx;
    background: #eaeaea;
    margin: 0 30rpx;
  }
  .img-mask {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: #5c5c5c;
    opacity: 0.8;
    z-index: 2;
  }
</style>
